<style lang="scss" scoped>
#instructions{
    background:#fff;
    height:100%;
    .ins{
        height:100%;
    }
    .instruct-left{
        width:225px;
        border:1px solid #eee;
        height:100%;
        float: left;
        .instruct-name-content{
            height:calc(100% - 30px);
            overflow-y:auto;
            overflow-x: hidden;
            padding:10px;
            ul{
                li{
                    height: 30px;
                    line-height:30px;
                    color:#333;
                    font-size:13px;
                    cursor: pointer;
                    &.active{
                        color:#0379A9;
                    }
                    &.nameLi{
                        padding-right:5px;
                        width:100%;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    .instruct-right{
        float: right;
        width:calc(100% - 245px);
        border:1px solid #eee;
        height:100%;
        margin-left:20px;
        .instruct-page-content{
            height:calc(100% - 30px);
            overflow:hidden;
            padding:10px;
        }
    }
    .instruct-title{
        height: 30px;
        line-height:30px;
        font-size:13px;
        color:#333;
        text-indent:1em;
        font-weight:400;
        background:rgba(215, 215, 215, 1);
    }
    .ins-null{
        min-height:300px;
        background:#fff;
        padding:10px;
    }
}
</style>
<template>
    <div id="instructions" class="content-mask" v-loading="loading">
        <div class="ins" v-if="drugId">
            <div class="instruct-left">
                <p class="instruct-title">列表</p>
                <div class="instruct-name-content">
                    <ul>
                        <li @click="getCurrentPage(item)" v-for="(item,index) in nameList" :key="index" :class="activeId == item.id ? 'active nameLi' : 'nameLi'" :title="item.drugFactory ?item.drugName+'('+item.drugFactory+')' : item.drugName">{{item.drugName}}<span v-if="item.drugFactory">({{item.drugFactory}})</span></li>
                    </ul>
                </div>
            </div>
            <div class="instruct-right">
                <p class="instruct-title">名称</p>
                <div class="instruct-page-content">
                    <iframe frameborder="0" width="100%" height="100%" :src="activeUrl"></iframe>
                </div>
            </div>
        </div>
        <div class="ins-null" v-if="!drugId">
            请先选择药物
        </div>
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
import { imgUrl } from '@/common/js/Base.js';
export default {
    name: 'instructions',//药物说明书
    data(){
        return{
            drugId:"",
            activeId:"1",
            loading:false,
            drugObject:{},
            activeUrl:'',
            imgUrl:imgUrl,
            nameList:[]
        }
    },
    methods:{
        getCurrentPage(item){
            this.activeId = item.id;
            if(item.type && item.type == "pdf"){
                this.activeUrl = this.imgUrl+this.drugObject.drug.drugId+'.pdf';
            }else{
                this.activeUrl = this.imgUrl+item.htmlName+'.html';
            }
        },
        getDrugNameList(){
            let obj={
                id:this.drugId
            }
            medicine.getLableByDrugId(obj).then((data)=>{
                if(data.status == 200){
                   if(data.data){
                       this.drugObject = data.data;
                       this.getNameList();
                   }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            });
        },
        getNameList(){
            this.nameList = [];
            if(this.drugObject.drug && this.drugObject.drug.fdaleb == 1){
                var obj={
                    type:"pdf",
                    id:new Date().getTime()+"d",
                    drugName:this.drugObject.drug.chName+"(FDA Label)"
                }
                this.nameList.push(obj);
            }
            if(this.drugObject.list && this.drugObject.list.length>0){
                for(var i=0;i<this.drugObject.list.length;i++){
                    this.nameList.push(this.drugObject.list[i]);
                }
            }
            if(this.nameList.length>0){
                this.activeId = this.nameList[0].id;
                if(this.drugObject.drug && this.drugObject.drug.fdaleb == 1){
                    this.activeUrl = this.imgUrl+this.drugObject.drug.drugId+'.pdf';
                }else{
                    this.activeUrl = this.imgUrl+this.nameList[0].htmlName+'.html';
                }
            }
            
        }
    },
    mounted() {
        this.drugId = this.$store.state.searchId ? this.$store.state.searchId : '';
        if(this.drugId){
            this.getDrugNameList();
        }
    },
    watch:{
        "$store.state.searchId":function(){
            if(this.$store.state.searchId && this.drugId != this.$store.state.searchId){
                this.drugId = this.$store.state.searchId;
                this.getDrugNameList();
            }
        }
    }
}
</script>